<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/main.jsp" %>
<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>描述</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="${V_PATH}/static/js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="${V_PATH}/static/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="${V_PATH}/static/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="${V_PATH}/static/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="${V_PATH}/static/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="${V_PATH}/static/css/font.css" type="text/css" />
  <link rel="stylesheet" href="${V_PATH}/static/css/app.css" type="text/css" />  
  
  <!--[if lt IE 9]>
    <script src="${V_PATH}/static/js/ie/html5shiv.js"></script>
    <script src="${V_PATH}/static/js/ie/respond.min.js"></script>
    <script src="${V_PATH}/static/js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<body class="">
  <section class="vbox">
    <section>
      <section class="hbox stretch">
          <section class="vbox" id="bjax-el">
            <section class="scrollable wrapper-lg">
                  <div class="panel wrapper-lg">
                    <div class="row">
                      <input type="hidden" id="commitMusicID" value="${MUSIC_DETAIL.id}">
                      <div class="col-sm-5">
                        <img src="${V_PATH}/static/images/m10.jpg" class="img-full m-b">
                      </div>
                      <div class="col-sm-7">
                        <h2 class="m-t-none text-black">${MUSIC_DETAIL.name }</h2>
                        <div class="clearfix m-b-lg">
                          <a href="#" class="thumb-sm pull-left m-r">
                            <img src="${V_PATH}/static/images/a0.png" class="img-circle">
                          </a>
                          <div class="clear">
                            <a href="#" class="text-info">By&nbsp;&nbsp;${MUSIC_DETAIL.author }</a>
                            <small class="block text-muted">${MUSIC_DETAIL.grank } followers</small>
                          </div>
                        </div>
                      </div>
                    </div>
                    <h4 class="m-t-lg m-b">Play List</h4>
                    <ul class="list-group list-group-lg">
                      <c:forEach var="music" items="${MUSIC_AUTHORS }">
                      	<li class="list-group-item">
	                        <div class="pull-right m-l">
	                          <a href="${V_PATH }/download.action?fileName=${music.name}.mp3&musicURL=${music.musicUri}"  class="m-r-sm"><i class="icon-cloud-download"></i></a>
	                          <a href="javascript:;"  onclick="addMusic('${music.id}','${music.musicUri}','${music.name }','${music.author }')" class="m-r-sm"><i class="icon-plus"></i></a>
	                        </div>
	                        <a href="javascript:;"  onclick="playMusic('${music.musicUri}','${music.name }','${music.author }')" class="m-r-sm pull-left">
	                           <i class="icon-control-play text"></i>
                          	   <i class="icon-control-play text-active"></i>
	                        </a>
	                        <div class="clear text-ellipsis">
	                          <span>${music.name }</span>
	                        </div>
	                     </li>
                      </c:forEach>
                      
                    </ul>
                  </div>
                  <!-- 评论开关 -->
                  <c:choose>
                  	<c:when test="${!empty LOGIN_USER}">
                  		<input type="hidden" id="loadCommitId" value="${MUSIC_DETAIL.id}">
                  		<div id="loadCommit"></div>
                  	</c:when>
                  	<c:otherwise>
                  		<div id="loadLogin">
                  			<p id="bootstrap">
					        	<strong>
					        		<a href="JavaScript:;" onclick="loadPage('${V_PATH}/signin.action')">登录/</a>
									<a href="JavaScript:;" onclick="loadPage('${V_PATH}/signup.action')" style="color:red">注册</a>
								</strong>
							</p>
                  		</div>
                  	</c:otherwise>
                  </c:choose>
                  <br>
                  <br>
                  <br>
            </section>
            <footer class="footer bg-dark">
                <div id="jp_container_N">
                    <div class="jp-type-playlist">
                        <div id="jplayer_N" class="jp-jplayer hide"></div>
                        <div class="jp-gui">
                            <div class="jp-video-play hide">
                                <a class="jp-video-play-icon">play</a>
                            </div>
                            <div class="jp-interface">
                                <div class="jp-controls">
                                    <div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a></div>
                                    <div>
                                        <a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                                        <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                                    </div>
                                    <div><a class="jp-next"><i class="icon-control-forward i-lg"></i></a></div>
                                    <div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a></div>
                                    <div><a class="" data-toggle="dropdown" data-target="#playlist"><i class="icon-list"></i></a></div>
                                    <div class="jp-progress hidden-xs">
                                        <div class="jp-seek-bar dk">
                                            <div class="jp-play-bar bg-info">
                                            </div>
                                            <div class="jp-title text-lt">
                                                <ul>
                                                    <li></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                                    <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                                    <div class="hidden-xs hidden-sm">
                                        <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                                        <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                                    </div>
                                    <div class="hidden-xs hidden-sm jp-volume">
                                        <div class="jp-volume-bar dk">
                                            <div class="jp-volume-bar-value lter"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <a class="jp-shuffle" title="shuffle"><i class="icon-shuffle text-muted"></i></a>
                                        <a class="jp-shuffle-off hid" title="shuffle off"><i class="icon-shuffle text-lt"></i></a>
                                    </div>
                                    <div>
                                        <a class="jp-repeat" title="repeat"><i class="icon-loop text-muted"></i></a>
                                        <a class="jp-repeat-off hid" title="repeat off"><i class="icon-loop text-lt"></i></a>
                                    </div>
                                    <div class="hide">
                                        <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                                        <a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="jp-playlist dropup" id="playlist">
                            <ul class="dropdown-menu aside-xl dker">
                                <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                                <li class="list-group-item"></li>
                            </ul>
                        </div>
                        <div class="jp-no-solution hide">
                            <span>Update Required</span>
                            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                        </div>
                    </div>
                </div>
            </footer>
          </section>
        </section>
      </section>
  </section>
  <script src="${V_PATH}/static/js/app.plugin.js"></script>
  <script type="text/javascript" src="${V_PATH}/static/js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="${V_PATH}/static/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="${V_PATH}/static/js/jPlayer/demo.js"></script>
  <script type="text/javascript" src="${V_PATH}/static/detail/track-detail.js"></script>

</body>
</html>